<template>
    <div>
        <!-- Question组件 -->
        <h4 style="margin-bottom:15px;">1# 这是一个测试题的题目 <i @click="showTips" class="el-icon-question"></i> </h4>

        <el-checkbox-group v-model="checkList">
            <el-checkbox label="A) 测试题目选项1"></el-checkbox>
            <el-checkbox label="B) 测试题目选项2"></el-checkbox>
            <el-checkbox label="C) 测试题目选项3"></el-checkbox>
            <el-checkbox label="D) 测试题目选项4"></el-checkbox>
        </el-checkbox-group>
        <el-button-group>
            <el-button size="small" type="success" icon="el-icon-arrow-left">上一题</el-button>
            <el-button size="small" type="success">下一题<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>

        <!-- 抽屉 -->
        <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :direction="direction"
            :modal="false"
            :width-header="false">
            <div style="padding:20px;">我来啦!</div>
        </el-drawer>
    </div>
</template>

<script>
export default {
    data () {
      return {
        checkList: [],
        drawer: false,
        direction: 'rtl',
      };
    },
    methods:{
        showTips(){
            console.log(111)
            this.drawer = true
        },
        handleClose(done){
            done();
        }
    }
}
</script>

<style scoped>
.el-checkbox-group .el-checkbox { 
    display: block;
    margin-bottom: 15px;
}
.el-icon-question {
    cursor: pointer;
    margin-left: 10px;
}
</style>